<template>
    <div class="payroot">
        <div class="yo-ico" @click="clickBack">&#xe60c;</div>
        <h1 class="head"><span>支付</span>失败<p>可能由于网络原因导致支付失败，请重试!</p></h1>
        <ul class="firstUl">
            <li class="firstLi"><i class="yo-ico">&#xe612;</i>订单明细</li>
            <li>订单编号<i>2019554165165</i></li>
            <li>订单类型<i>课程</i></li>
            <li>课程名称<i>HIIT燃脂跑教程</i></li>
            <li>课程价格<i>￥239.00</i></li>
            <li>活动优惠<i>-￥40.00</i></li>
            <li>优惠后价格<i class="seven">￥199</i></li>
            <li class="eightLi">上一次支付方式<i>支付宝</i></li>
            <li>支付结果<i>支付失败</i></li>
        </ul>
        <ul class="lastUl">
            <li class="firstLi"><div><i class="yo-ico">&#xe613;</i>支付方式</div></li>
            <li><div><i class="yo-ico">&#xe634;</i>微信支付</div><i class="yo-ico">&#xe68b;</i></li>
            <li><div><i class="yo-ico">&#xe605;</i>支付宝支付</div><i class="yo-ico">&#xe6b2;</i></li>
        </ul>
        <div class="pay"><div><span>￥199.00</span><i>|已优惠40</i></div><b @click="clickRepay">重新支付</b></div>
    </div>
</template>

<script>
    export default ({
        methods:{
            clickBack(){
                this.$router.back();
            },
            clickRepay(){
                this.$router.push("/pay/index")
            }
        }
    })
</script>

<style lang='stylus' scoped>
    @import "../../assets/stylus/border.styl"
    .payroot
        width 100%
        height 100vh
        display flex
        flex-direction column
        justify-content space-around
        margin 20px 0 15px 0
        padding 0 8%
        background-image: linear-gradient(#5a5a5a, #f5f5f5)

        
        &:first-child 
            font-size 18px
            color #fff
            line-height 20px
        
        .head 
            font-size 18px
            color #ffffff
            margin-top -5%
            p
                font-size 12px
                color #ccc
            span
                color #f6cc95
        .firstUl 
            margin-top -5%
            width 100%
            height 53%
            background-color #fff
            color #000
            padding 0 7%
            display flex
            flex-direction column
            justify-content space-around

            li 
                border_1px(0 0 1px 0,#f5f6fa)
                display flex
                justify-content space-between
                font-size .12ref
            .firstLi 
                color #ccc
                justify-content flex-start
                height 6%
                line-height 6%
                margin-top 6%
            i   
                    font-size 12px
                    color #ccc
            .seven 
                color #f6cc95   
            .eightLi  
                margin-top 3%
        .lastUl
            display flex
            flex-direction column
            justify-content space-around
            width 100%
            height 15%
            background-color #fff
            color #000
            font-size 12px
            padding 0 7%
            margin-top -5%
            .firstLi 
                color #ccc
            li 
                display flex
                justify-content space-between
        .pay
            width 100%
            height 5%
            background-color #f5f6fa
            color #000
            margin-bottom 10%
            display flex
            justify-content space-between
            align-items center
            span 
                color #f6cc95
                font-size .15rem
            i   
                font-size .12rem
                color #ccc
            b
                font-size .16rem
                font-weight 400
                display block
                width 35%
                height 100%
                background-color #f6cc95
                display flex
                justify-content center
                align-items center
                color #fff
</style>
